<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<title>博客首页</title>
	<link rel="stylesheet" type="text/css" href="css/blog-index.css"/>
	<link  rel="stylesheet" type="text/css" href="css/post.css"/>
	<script src="js/jquery.js"></script>
	<script src="js/blog-index.js"></script>
	<script src="js/cor.js"></script>
</head>
<body>
	<!-- 固定层 -->
	<div style="opacity: 1;" class="tool" id="tool">
		<!-- 导航栏 -->
		<div class="lead">
			<div class="lead-cover">
				<div class="host">张小洛</div>
				<!--靠右边的选项-->
				<div class="menu" >
					<span>MENU</span>
					<img src="images/menu.svg"/>
				</div>
			</div>
		</div>
		<!--菜单栏 -->
		<div class="menu-selection"></div>
	</div>

	<!-- 侧边固定层 -->
	<div>
		<!-- 回到顶部 -->	
		<div class="go-top" id="goTop">
			<div class="case" id="case">
				<img src="images/goTop.svg" width="50px" height="50px"/>	
				<p>
					回到
					<br/>	
					顶部
				</p>
			</div>
		</div>
		<div class="share-items" id="shareItems">
				<img src="images/微信.png" width="50px" height="50px"/>	
				<p>
				<img src="images/qq.png" width="50px" height="50px"/>	
				<p>
				<img src="images/share.svg" width="50px" height="50px"/>	
				<p>
			</div>
		<div class="share" id="share">

			<div class="case" id="case">
				<img src="images/share.svg" width="50px" height="50px"/>	
				<p>
					分享
				</p>
			</div>
		</div>
	</div>
	<!-- 主要内容 -->
	<div class="index" id="index">
		<div class="container">

			<!--主页左侧-->
			<div class="container-left">
				<!--博主信息-->
				<div class="per-message">
					<div class="head-image">
						<img src="images/headImage.png" width="80" height="80" />
					</div>
					<div class="per-message-txt">
						<p class="big">张小洛</p>
						<p class="small">在追梦的路上</p>
						<p class="small">视死如归</p>
					</div>
				</div>

				<!-- 搜索 -->
				<div class="search">
					<form action="#" >
						<input type="text" class="search-txt"/>
						<input type="button" class="search-btn"  value="搜索"/>
					</form>
				</div>

				<!--以下三部分每个li里都要有一个对应的随笔数量（暂未实现） -->
				<div class="mylabel">
					<h3 class="label-title">我的标签</h3>
					<hr/>
					<ul>
						<li>
							<a href="hh.html" target="_blank">sublime</a>
						</li>
						<li>
							<a href="hh.html" target="_blank">工具</a>
						</li>
						<li>
							<a href="hh.html" target="_blank">表单</a>
						</li>
						<li>
							<a href="hh.html" target="_blank">设计灵感</a>
						</li>
						<li>
							<a href="hh.html" target="_blank">优化</a>
						</li>
					</ul>
				</div>

				<!-- 随笔分类 -->
				<div class="mylabel">
					<!-- 这个分类有点不太合理 -->
					<h3 class="label-title">随笔分类</h3>
					<hr/>
					<ul>
						<li>
							<a href="hh.html" target="_blank">javascript</a>
						</li>
						<li>
							<a href="hh.html" target="_blank">css/html</a>
						</li>
						<li>
							<a href="hh.html" target="_blank">php</a>
						</li>
						<li>
							<a href="hh.html" target="_blank">随手记</a>
						</li>
					</ul>
				</div>

				<!-- 随笔档案 -->
				<div class="mylabel">
					<h3 class="label-title">随笔档案</h3>
					<hr/>
					<ul>
						<li>
							<a href="hh.html" target="_blank">2016年7月</a>
						</li>
						<li>
							<a href="hh.html" target="_blank">2016年6月</a>
						</li>
						<li>
							<a href="hh.html" target="_blank">2016年5月</a>
						</li>
						<li>
							<a href="hh.html" target="_blank">2016年4月</a>
						</li>
						<li>
							<a href="hh.html" target="_blank">2016年3月</a>
						</li>
					</ul>
				</div>
			</div>

			<!-- 主页右侧 -->
			<div class="container-right">
				<div class="post">
					<div class="path" >
						<p>你当前的位置:</p>
						<a href="index.html">主页</a>
						<p1>>></p1>
						<a href="index.html">随手记</a>
					</div>
					<div class="post-txt" style="height:3000px;margin:0 auto;padding:10px 30px;">
						<h4>Javascript——touch事件介绍与实例演示</h4>
						<div class="post-msg">
							<div class="m-time">2016年7月7号</div>
							<div class="writer">作者：张小洛</div>
							<div class="group">
								分类：
								<a href="hh.html target="_blank"">随手记</a>
							</div>
							<div class="group">
								标签：
								<a href="hh.html target="_blank"">javascript</a> <em>&nbsp</em>
								<a href="hh.html target="_blank"">css</a>
							</div>
						</div>
						<hr/>
						<div class="m-txt">

							<p>一、手机上的触摸事件</p>
							<p>基本事件：</p>
							<p>
								touchstart //手指刚接触屏幕时触发
								<br>
								touchmove //手指在屏幕上移动时触发
								<br>touchend //手指从屏幕上移开时触发</p>
							<p>
								下面这个比较少用：
								<br>touchcancel //触摸过程被系统取消时触发</p>
							<p>每个事件都有以下列表，比如touchend的targetTouches当然是 0 咯：</p>
							<p>
								touches //位于屏幕上的所有手指的列表
								<br>
								targetTouches //位于该元素上的所有手指的列表
								<br>changedTouches //涉及当前事件的所有手指的列表</p>
							<p>每个事件有列表，每个列表还有以下属性：</p>
							<p>
								其中坐标常用pageX,pageY：
								<br>
								pageX //相对于页面的 X 坐标
								<br>
								pageY //相对于页面的 Y 坐标
								<br>
								clientX //相对于视区的 X 坐标
								<br>
								clientY //相对于视区的 Y 坐标
								<br>
								screenX //相对于屏幕的 X 坐标
								<br>screenY //相对于屏幕的 Y 坐标</p>
							<p>
								identifier // 当前触摸点的惟一编号
								<br>target //手指所触摸的 DOM 元素</p>
							<p>其他相关事件：</p>
							<p>
								event.preventDefault（） //阻止触摸时浏览器的缩放、滚动条滚动
								<br>var supportTouch = “createTouch” in document //判断是否支持触摸事件</p>
							<p>二、示例</p>
							<p>以下是获取不同类型滑动的代码具体做法，结合前人的思想，封装好了，可以借鉴学习：</p>

							<!-- 代码块区域 -->
							<div class="txt-code">
								<!-- 代码块 -->
								<p>
									var touchFunc = function(obj,type,func) {
									<br/>
									//滑动范围在5x5内则做点击处理，s是开始，e是结束
									<br/>
									var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
									<br/>
									var sTime = 0, eTime = 0;
									<br/>
									type = type.toLowerCase();
									<br/>
									<br/>
									obj.addEventListener("touchstart",function(){
									<br/>
									sTime = new Date().getTime();
									<br/>
									init.sx = event.targetTouches[0].pageX;
									<br/>
									init.sy = event.targetTouches[0].pageY;
									<br/>
									init.ex = init.sx;
									<br/>
									init.ey = init.sy;
									<br/>
									if(type.indexOf("start") != -1) func();
									<br/>
									}, false);
									<br/>
									obj.addEventListener("touchmove",function() {
									<br/>
									event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
									<br/>
									init.ex = event.targetTouches[0].pageX;
									<br/>
									init.ey = event.targetTouches[0].pageY;
									<br/>
									if(type.indexOf("move")!=-1) func();
									<br/>
									}, false);
									<br/>
									obj.addEventListener("touchend",function() {
									<br/>
									var changeX = init.sx - init.ex;
									<br/>
									var changeY = init.sy - init.ey;
									<br/>
									if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
									<br/>
									//左右事件
									<br/>
									if(changeX > 0) {
									<br/>
									if(type.indexOf("left")!=-1) func();
									<br/>
									}else{
									<br/>
									if(type.indexOf("right")!=-1) func();
									<br/>
									}
									<br/>
									}
									<br/>
									else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
									<br/>
									//上下事件
									<br/>
									if(changeY > 0) {
									<br/>
									if(type.indexOf("top")!=-1) func();
									<br/>
									}else{
									<br/>
									if(type.indexOf("down")!=-1) func();
									<br/>
									}
									<br/>
									}
									<br/>
									else if(Math.abs(changeX) 300) {
									<br/>
									if(type.indexOf("long")!=-1) func(); //长按
									<br/>
									}
									<br/>
									else {
									<br/>
									if(type.indexO
									<br/>
									("click")!=-1) func(); //当点击处理
									<br/>
									}
									<br/>
									}
									<br/>
									if(type.indexOf("end")!=-1) func();
									<br/>
									}, false);
									<br/>
									};
									<br/>
								</p>
							</div>
						</div>

						<!-- 上下篇 -->
						<p>
							上一篇：
							<a href="post1.html" target="_blank">jQuery – 鼠标经过(hover)事件的延时处理</a>
						</p>
						<p>
							下一篇：
							<a href="post3.html" target="_blank">SVG特征、支持以及一些实际使用问题</a>
						</p>

						<!-- 相关文章 -->
						<div class="related">
							<h5>相关文章</h5>
							<hr/>
							<p>
								<a href="post1.html" target="_blank">JS滚轮事件(mousewheel/DOMMouseScroll)了解</a>
								<p></div>

								<!-- 评论区 -->
								<div class="comment">
								<h5>评论区</h5>
							<hr/>
									<!-- 发表评论 -->

									<!-- 已发评论 -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
</body>
		</html>